<template>
  <div style="padding-bottom:100px;">
    <div v-title>订单详情</div>
    <div class="box">
      <div class="title">
        <div>{{QuoteInfo.InsuranceName}}</div>
      </div>
      <div class="info">
        <p>收件姓名：{{OrderInfo.Addressee}}</p>
        <p>手机号码：{{OrderInfo.ContactPhone}}</p>
        <p>收件地址：{{OrderInfo.ProvinceName + OrderInfo.CityName + OrderInfo.DetailedAddress}}</p>
        <p>车主姓名：{{OrderInfo.CarOwner}}</p>
        <p>号牌号码：{{OrderInfo.PlateNumber}}</p>
      </div>
      <div class="table">
        <div class="head">
          <p>险种</p>
          <p>金额</p>
        </div>
        <div class="list" v-if="OrderInfo.IsMust == 0">
          交强险+车船使用税
          <span>￥{{OrderInfo.MustMoney.toFixed(2)}}</span>
        </div>
        <div class="list" v-for="item in List">
          {{item.PolicyName}}
          <span>￥{{item.PolicyMoney.toFixed(2)}}</span>
        </div>
        <div class="slot">
          <p>保单合计：￥{{Number(OrderInfo.TotalAmount).toFixed(2)}}</p>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="title">
        <div>选择付款期数</div>
        <span @click="dtime = true" class="rightSpan">{{Period}}个月
          <van-icon name="arrow" />
        </span>
      </div>
      <div class="fenqi">
        <table class="tb" border="0" cellspacing="0">
          <tr class="tb_head">
            <th>期次</th>
            <th>本金</th>
            <th>手续费</th>
            <th>应付金额</th>
          </tr>
          <tr class="tb_list" v-for="item in Stag">
            <td>{{item.Number}}</td>
            <td>￥{{item.Principal}}</td>
            <td>￥{{item.Fees}}</td>
            <td>￥{{item.Actuals}}</td>
          </tr>
        </table>
        <p class="watch" v-if="Period != 3 && show == true" @click="all()">查看全部
          <van-icon name="arrow" class="down" />
        </p>
      </div>
    </div>
    <div class="ctm">
      <p>每期手续费({{Bili*100}}%)：
        <span>￥{{Number(OrderInfo.StagingMoney*this.Bili).toFixed(2)}}</span>
      </p>
      <p>每期本金：
        <span>￥{{Number(this.OrderInfo.StagingMoney / this.Period).toFixed(2)}}</span>
      </p>
      <p v-if="OrderInfo.IsMust == 0">交强险金额：
        <span>￥{{Number(OrderInfo.MustMoney).toFixed(2)}}</span>
      </p>
    </div>
    <div class="bottom">
      <div class="total">
        第1期应付金额：
        <span>￥{{Number(OrderInfo.MustMoney + OrderInfo.StagingMoney/Period + OrderInfo.StagingMoney*this.Bili).toFixed(2)}}</span>
      </div>
      <div class="next" @click="submit()" v-show="twice == false">
        确认提交
      </div>
      <div class="next" v-show="twice == true">
        <van-loading type="circle" color="black" style="display: inline-block; margin-right: 10px; top: -2px;" />提交中...
      </div>
    </div>
    <van-popup position="bottom" v-model="dtime">
      <van-picker show-toolbar title="请选择付款期数" :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
</template>
<script>
import api from '../fetch/api.js';
import {
  Icon,
  Picker,
  Popup,
  Toast,
  Loading
} from 'vant';
export default {
  components: {
    [Icon.name]: Icon,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Loading.name]: Loading,
  },
  data() {
    return {
      columns: ['3个月', '6个月', '9个月', '12个月'],
      dtime: false,
      show: true,
      QuoteInfo: '',
      OrderInfo: '',
      List: [],
      Stag: [],
      Period: 3,
      Bili: 0,
      threeBili: '',
      sixBili: '',
      nineBili: '',
      twelveBili: '',
      twice: false,
    }
  },
  created() {
    //获取初始手续比例
    api.Post('Tool/SystemConfig/GetList', {})
      .then(res => {
        this.threeBili = res[0].ServiceProportion
        this.sixBili = res[1].ServiceProportion
        this.nineBili = res[2].ServiceProportion
        this.twelveBili = res[3].ServiceProportion
      })
  },
  mounted() {
    //报价
    api.Post('Order/QuoteInfo/GetOneModel', {
      ID: this.$route.params.id
    })
      .then(res => {
        this.QuoteInfo = res
      })
    //草稿
    api.Post('Order/DraftInfo/GetOneModel', {
      ID: this.$route.params.cd
    })
      .then(res => {
        this.OrderInfo = res
        var jason = JSON.parse(res.InsuranceCategory)
        for (var i = 0; i < jason.PolicyName.length; i++) {
          this.List.push({
            PolicyName: jason.PolicyName[i],
            PolicyMoney: Number(jason.PolicyMoney[i]),
          })
        }
        this.Staging()
      })
  },
  methods: {
    submit() {
      this.twice = true
      api.Post('Order/PolicyOrder/CreateOrder', {
        PeriodsNumber: this.Period,
        OfferID: this.$route.params.id,
        DraftID: this.$route.params.cd
      })
        .then(res => {
          if (res.Success == true) {
            Toast.success(res.Msg);
            this.$router.push('/Voucher/' + res.Infor + '/0/1')
            // this.$router.push('/FQPay/' + res.Infor + '/1')
          } else {
            this.twice = false
            Toast.fail(res.Msg);
          }
        })
    },
    Staging() {
      this.Stag = []
      for (var j = 0; j < 3; j++) {
        this.Stag.push({
          Number: j + 1,
          Principal: (this.OrderInfo.StagingMoney / this.Period).toFixed(2),
          Fees: (this.OrderInfo.StagingMoney * this.Bili).toFixed(2),
          Actuals: (this.OrderInfo.StagingMoney / this.Period + this.OrderInfo.StagingMoney * this.Bili).toFixed(2)
        })
      }
    },
    all() {
      this.show = false
      this.Stag = []
      for (var j = 0; j < this.Period; j++) {
        this.Stag.push({
          Number: j + 1,
          Principal: (this.OrderInfo.StagingMoney / this.Period).toFixed(2),
          Fees: (this.OrderInfo.StagingMoney * this.Bili).toFixed(2),
          Actuals: (this.OrderInfo.StagingMoney / this.Period + this.OrderInfo.StagingMoney * this.Bili).toFixed(2)
        })
      }
    },
    onConfirm(value, index) {
      this.dtime = false
      if (index == 0) {
        this.Period = 3
        this.Bili = this.threeBili
      } else if (index == 1) {
        this.Period = 6
        this.Bili = this.sixBili
        this.show = true
      } else if (index == 2) {
        this.Period = 9
        this.Bili = this.nineBili
        this.show = true
      } else if (index == 3) {
        this.Period = 12
        this.Bili = this.twelveBili
        this.show = true
      }
      this.Staging()
    },
    onCancel() {
      this.dtime = false
    }
  }
}

</script>
<style scoped>
* {
  font-size: 14px;
}

.box {
  width: 94%;
  overflow: hidden;
  margin: auto;
  margin-top: 10px;
  background: #fff;
  border-radius: 3px;
}

.title {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  overflow: hidden;
}

.title div {
  border-left: 3px solid #2491ff;
  padding-left: 7px;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  float: left;
}

.title .rightSpan {
  color: #2491ff;
  float: right;
  font-size: 18px;
  font-weight: 500
}

.info {
  margin: 0 10px;
}

.info p {
  margin: 0;
  padding: 10px 0 0 0;
  font-size: 14px;
  color: #333;
}

.table {
  margin: 10px;
  border: 1px solid #eee;
  overflow: hidden;
}

.head {
  overflow: hidden;
}

.head p:nth-child(1) {
  margin: 0;
  width: 60%;
  float: left;
  text-align: center;
  background: #eee;
  color: #333;
  padding: 5px 0;
}

.head p:nth-child(2) {
  margin: 0;
  width: 40%;
  float: left;
  text-align: center;
  background: #eee;
  color: #333;
  padding: 5px 0;
}

.fenqi {
  padding: 10px;
  overflow: hidden;
}

.list {
  padding: 10px;
  border-bottom: 1px solid #eee;
  color: #666;
}

.list span {
  float: right;
}

.slot p {
  margin: 5px 0;
  text-align: right;
  padding-right: 10px;
  color: #666;
}

.slot span {
  color: #f33e16;
}

.tb {
  width: 100%;
  text-align: center;
}

.tb_head {
  background: #f3f3f3;
}

.tb_head th {
  padding: 5px 0;
  font-weight: normal;
  color: #333;
}

.tb_list td {
  border-bottom: 1px solid #f3f3f3;
  padding: 5px 0;
  color: #666;
}

.tb_list td:first-child {
  border-left: 1px solid #f3f3f3;
}

.tb_list td:last-child {
  border-right: 1px solid #f3f3f3;
}

.down {
  -webkit-transform: rotate(90deg);
  /*Safari 4+,Google Chrome 1+  */
  -moz-transform: rotate(90deg);
  /*Firefox 3.5+*/
  color: #999;
  margin-left: 5px;
  font-size: 14px;
}

.watch {
  color: #666;
  text-align: center;
  margin: 10px 0 0 0;
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background: #fff;
  height: 60px;
  border-top: 1px solid #eee;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.total {
  width: 64%;
  float: left;
  line-height: 60px;
  text-align: center;
  color: #666666;
  font-size: 14px;
}

.total span {
  color: #f33e16;
  font-size: 16px;
}

.next {
  width: 36%;
  float: right;
  line-height: 60px;
  background: #2491ff;
  color: #fff;
  text-align: center;
  font-size: 16px;
}

.ctm {
  width: 94%;
  overflow: hidden;
  margin: auto;
  margin-top: 10px;
  background: #fff;
  border-radius: 3px;
}

.ctm p {
  margin: 10px;
  color: #666666;
}

.ctm span {
  float: right;
}
</style>
